<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>

    <h:body>


        <ui:composition template="/template/common/commonLayout.xhtml">                

            <ui:define name="content">


                <p:layoutUnit position="center">


                    <div align="center">

                        <p:panelGrid columns="1" styleClass="mainTitleBox">
                            <h:outputText value="Detalle de Cliente" styleClass="mainTitle"/>
                        </p:panelGrid>

                        <h:form id="form">             

                            <!--client data-->
                            <p:panel id="dataClient"
                                     header="Datos Cliente" 
                                     toggleable="true"
                                     closable="false" 
                                     toggleSpeed="500" 
                                     collapsed="false"
                                     closeSpeed="500"
                                     style="margin-bottom:20px">

                                <p:panelGrid columns="2">

                                    <h:outputText value="Identificación Cliente"/>
                                    <h:outputText value="#{CustomerBean.selected.cusid}"/>

                                    <h:outputText  value="Nombre Cliente"/>
                                    <h:outputText value="#{CustomerBean.selected.fname}"/>

                                    <h:outputText  value="Apellido Cliente"/>
                                    <h:outputText value="#{CustomerBean.selected.lname}"/>

                                    <h:outputText value="Número Teléfono"/>
                                    <h:outputText value="#{CustomerBean.selected.phonenumber}"/>

                                    <h:outputText  value="Correo Electónico"/>
                                    <h:outputText value="#{CustomerBean.selected.email}"/>

                                    <h:outputText  value="Estado"/>
                                    <h:outputText value="#{CustomerBean.selected.status}"/>

                                    <h:outputText  value="Tipo Tarjeta de Crédito"/>
                                    <h:outputText value="#{CustomerBean.selected.creditcardtype}"/>

                                    <h:outputText  value="Número Tarjeta de Crédito"/>
                                    <h:outputText value="#{CustomerBean.selected.creditcardnumber}"/>

                                </p:panelGrid>     

                            </p:panel>

                            <!--address client data-->
                            <p:panel id="dirClient"
                                     header="Direcciones Cliente" 
                                     toggleable="true"
                                     closable="false" 
                                     collapsed="true"
                                     toggleSpeed="500" 
                                     closeSpeed="500"
                                     style="margin-bottom:20px">

                                <p:dataTable rows="6"                                         
                                             paginator="true"                                         
                                             var="add"
                                             value="#{CustomerBean.selected.addressList}"
                                             style="width: 950px; height: auto; padding-top: 15px; padding-bottom: 15px">                                

                                    <p:column headerText="Tipo Dirección">
                                        <h:outputText value="#{add.addresstype}"/>
                                    </p:column>                                

                                    <p:column headerText="Ciudad">
                                        <h:outputText value="#{add.city}"/>
                                    </p:column>                                

                                    <p:column headerText="País">
                                        <h:outputText value="#{add.country}"/>
                                    </p:column>                                

                                    <p:column headerText="Estado">
                                        <h:outputText value="#{add.state}"/>
                                    </p:column>                                

                                    <p:column headerText="Calle">
                                        <h:outputText value="#{add.street}"/>
                                    </p:column>                  

                                    <p:column headerText="Código ZIP">
                                        <h:outputText value="#{add.zip}"/>
                                    </p:column>

                                </p:dataTable>

                            </p:panel>

                            <!--orders by client-->
                            <p:panel id="clientOrders"
                                     header="Ordenes Cliente" 
                                     toggleable="true"
                                     collapsed="true"
                                     closable="false" 
                                     toggleSpeed="500" 
                                     closeSpeed="500"
                                     style="margin-bottom:20px">

                                <p:dataTable rows="6"                                         
                                             paginator="true"                                             
                                             var="order"
                                             value="#{CustomerBean.selected.ordersList}"
                                             style="width: 950px; height: auto; padding-top: 15px; padding-bottom: 15px; word-wrap: break-word;"
                                             styleClass="myTable">                                

                                    <p:column headerText="Identificador Orden">
                                        <h:outputText value="#{order.ordid}"/>
                                    </p:column>                                

                                    <p:column headerText="Fecha">
                                        <h:outputText value="#{order.orderdate}"/>
                                    </p:column>                                

                                    <p:column headerText="Comentarios" width="50">
                                        <h:outputText value="#{order.comments}"/>
                                    </p:column>                                

                                    <p:column headerText="Precio">
                                        <h:outputText value="#{order.price}"/>
                                    </p:column>                                

                                    <p:column headerText="Estado">
                                        <h:outputText value="#{order.status}"/>
                                    </p:column>                             

                                </p:dataTable>

                            </p:panel>

                            <p:commandButton  action="#{CustomerBean.backToMainPage}"
                                              icon="ui-icon-search"                                                 
                                              value="Regresar"/>

                        </h:form>

                    </div>

                </p:layoutUnit>

            </ui:define>

        </ui:composition>

    </h:body>
</html>